<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>商品分类</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="js/dropzone/min/basic.min.css" />
    <link rel="stylesheet" href="js/dropzone/min/dropzone.min.css" />
    <link rel="stylesheet" type="text/css" href="js/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="js/magnific-popup/magnific-popup.min.css">
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h4>商品分类</h4>
                    <div>
                        <button class="btn btn-info btn-xs btn-round" id="editBtn">编辑</button>
                    </div>
                    <div>
                        <button class="btn btn-success btn-xs btn-round" id="addsBtn">添加</button>
                    </div>
                    <!--<div>
                        <button class="btn btn-danger btn-xs btn-round" id="delsBtn">删除</button>
                    </div>-->
                </div>
                <div class="card-body">

                    <div class="zTreeDemoBackground left">
                        <ul id="tree" class="ztree"></ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h4>商品管理</h4>
                </div>
                <div class="card-body">
                    <form id="searchForm">
                        <input id="ids" name="ids" type="hidden" value="">
                    </form>
                    <table id="tb_categroy"></table>

                </div>
            </div>
        </div>

    </div>

    <!--  添加与编辑模态框 -->
    <div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">商品管理</h4>
                </div>
                <div class="modal-body">
                    <form id="addOrEditForm" action="" method="post" data-target="validator">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">商品分类名称：</label>
                            <input type="hidden" name="id">
                            <input type="text" class="form-control" id="recipient-name" name="name" required>
                        </div>

                        <div class="form-group">
                            <label class="control-label">热搜：</label>
                            <div>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="hot" value="0"/>不热搜</label>
                                <label class="checkbox-inline i-checks"> <input type="radio" name="hot" value="1"/>热搜</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label">商品分类级别</label>
                           <!-- <select class="form-control" id="example-select" name="deptLevel">
                                <option value="1">1级</option>
                                <option value="2">2级</option>
                                <option value="3">3级</option>
                                <option value="4">4级</option>
                            </select>-->
                            <input type="text" class="form-control" id="level" name="level" readonly>
                        </div>


                        <div class="form-group">
                            <label  class="control-label">上级商品分类名称：</label>
                            <input type="hidden" name="parentId">
                            <input type="text" class="form-control"  name="parentName" readonly>
                        </div>
                        <div class="form-group">
                            <label for="logo" class="control-label">上传三级图标：</label>
                            <input type="hidden" name="logo" id="logo">
                            <div id="example-dropzone"  class="dropzone"></div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="sava">保存</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.version.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.core.js"></script>
<!-- bootstrap表单验证插件 -->
<script type="text/javascript" src="js/bootstrap-validator-master/dist/validator.js"></script>
<!-- jquery-form表单提交插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.form.js"></script>
<!-- bootstrap弹出框插件 -->
<script type="text/javascript" src="js/jquery.bootstrap.min.js"></script>
<!-- 表单填充插件 -->
<script type="text/javascript" src="js/jquery-form/jquery.formloader.js"></script>
<!-- ztree树插件 -->
<script type="text/javascript" src="js/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.ztree.js"></script>
<!-- ckeditor富文本插件 -->
<script src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/dropzone/min/dropzone.min.js"></script>
<!--上传图片插件-->
<script type="text/javascript" src="js/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.uploader.js"></script>
<!--上传图片插件-->
<script type="text/javascript" src="js/zero2one/zero2one.drop.js"></script>
<script type="text/javascript" src="js/inputmoney.js"></script>


<script type="text/javascript">

    //页面初始化完成加载部门数据
    $.post("/remote/cate/category", {},
        function(data){
            $.fn.zTree.init($("#tree"), {callback: {onClick: onClick}}, data);
        }, "json");

    var flag;//判断是否是顶级部门
    var zj;
    var tb;
    var ids;
    var fId;
    function onClick(event, treeId, treeNode) {

        flag = treeNode.level;
        fId=treeNode.getParentNode().id;
        if(treeNode.getParentNode() != null){
            tb = {parentId:treeNode.getParentNode().parentId,
                parentName:treeNode.getParentNode().name, id:treeNode.id,
                name:treeNode.name, level:treeNode.level,logo:treeNode.logo,hot:treeNode.hot};
        }
        zj = {id:treeNode.id, name:treeNode.name, level:treeNode.level,logo:treeNode.logo,hot:treeNode.hot};
        if(treeNode.level == 0){
            getDeptUserByIds();
        }else{
            ids = zero2one.getChildNodes("tree", treeNode);
            $("#ids").val(ids);
            getDeptUserByIds();
        }
    }

    //上传图片
    zero2one.drop("example-dropzone","logo");

    function getDeptUserByIds() {
        //设置表头
        var columns = [
            {checkbox: true},
            {field: 'id',title: 'ID'},
            {field: 'name',title: '分级名称'},
            {field: 'level',title: '当前级别',formatter: function (value, row, index) {
                    if (value=='0') {
                        return "顶级";
                    }else if(value=='1'){
                        return "一级";
                    }else if(value=='2'){
                        return "二级";
                    }else if(value=='3'){
                        return "三级";
                    }else if(value=='4'){
                        return "四级";
                    }}
             },
            {field: 'logo',title: '图标',formatter: function (value, row, index) {
                if(value){
                    var html = "<img  style='width: 150px;height: 60px'  src='"+value+"'/>";
                    return html;
                }
                }},
            {field: 'hot',title: '热搜',formatter: function (value, row, index) {
                    if (value=='0') {
                        return "不热搜";
                    }else if(value=='1'){
                        return "热搜";
                    }}}
        ];

        //进入主界面加载数据
        zero2one.datagrid("tb_categroy", "/remote/cate/queryCate",function (params) {
            return $.extend(zero2one.tableInitParam(params), zero2one.form2json("searchForm"));
        }, columns);

        $('#tb_categroy').bootstrapTable('refresh');
    }

    //点击添加按钮弹出模态框
    $("#addsBtn").click(function () {

        $("#example-dropzone").empty();
        //先清空
        $("input[name=name]").val("");
        $("input[name=id]").val("");
        $(":radio[name='hot'][value='0']").prop("checked", "checked");
        if(zj == null){
            $.messager.alert("温馨提示", "请先选择上级部门再操作");
            return;
        }
        if(zj.level == 4){
            $.messager.alert("温馨提示", "不能再添加下级部门了");
            return;
        }
        //获取上级ID
        $("input[name=parentId]").val(zj==null?"":zj.id);
        //获取自己等级
        $("input[name=level]").val(zj.level+1);
        $("input[name=parentName]").val(zj==null?"":zj.name);

        $("#addOrEditModal").modal("show");
    });

    //点击编辑按钮弹出模态框
    $("#editBtn").click(function () {

        //判断是否是顶级部门
        if(flag == 0){
            $.messager.alert("温馨提示", "商品管理无需编辑操作");
            return;
        }
        //	判断是否选中当前要编辑的部门
        if(tb == null){
            $.messager.alert("温馨提示", "请先选择要编辑的商品分类再操作");
            return;
        }
        //加载表单数据
        $("#addOrEditForm").formloader({data: zj});

        $("#example-dropzone").empty();
        var dropz = Dropzone.forElement('#example-dropzone');//获取Dropzone元素节点
        //创建模拟文件
        var mockFile = {
            name:zj.logo , //显示的文件名
            accepted:true
        };
        dropz.emit("addedfile", mockFile);
        //图片地址
        var imageUrl =zj.logo;
        //生成缩略图
        dropz.emit("thumbnail", mockFile,imageUrl);
        //完成（如果没有，缩略图上会有一根进度条一直存在）
        dropz.emit("complete", mockFile);

        $("input[name=parentName]").val(zj==null?"":tb.parentName);

        //父id
        $("input[name=parentId]").val(zj==null?"":fId);
        $(":radio[name='hot'][value='" + zj.hot + "']").prop("checked", "checked");

        $("#addOrEditModal").modal("show");
    });

    //点击删除按钮弹出模态框
    $("#delsBtn").click(function () {
        //判断是否选中行数据，如果没有则提示
        if(flag == 0){
            $.messager.alert("温馨提示", "商品管理不能删除");
            return;
        }
        if(tb == null){
            $.messager.alert("温馨提示", "请先选择要删除哪个商品分类");
            return;
        }
        ss = ids.split(",");
        if(ss.length==1){
            $.messager.confirm("温馨提示", "您确定要删除商品分类及以下子分类吗?", function () {
                //发送请求,执行批量删除
                zero2one.request("/remote/cate/delByIds",{"id": ids,"level":zj.level},function (data) {
                    window.location.reload();

                });
            })
        }else {
            $.messager.alert("你还有下级不能删除");
        }

    });



    //保存按钮的点击事件
    $("#sava").click(function () {
        zero2one.request("/remote/cate/addOrEdit",$("#addOrEditForm").serialize(),function (data) {
            if (data.success) {
                window.location.reload();
            }else {
                $.messager.alert("温馨提示", data.msg)
            }
        });
    });



</script>

</body>
</html>
